:root {
    --box-width: fit-content;
    --box-height: fit-content;
}

.demo-box.article-mod {
    height: fit-content;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.demo-box.article-mod dl {
    width: 100%;
    height: fit-content;
}

.demo-box ul {
    padding-left: 20px;
}

.demo-box {
    height: calc(100vh - 80px);
    width: calc(100vw - 20px);
    counter-reset: css-demo-title;
}

.demo-box dl {
    display: inline-block;
    width: var(--box-width);
    height: var(--box-height);
    border: 1px dashed red;
    padding: 10px;
    vertical-align: top;
    overflow: hidden;
    resize: both;
}

.demo-box dt {
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 28px;
    text-decoration: underline black;
    text-underline-offset: 5px;
    counter-increment: css-demo-title;
    counter-reset: css-demo-item;
    font-size: 20px;
}

dl h4 {
    counter-increment: css-demo-item;
}

dl h4::before {
    content: counter(css-demo-title)"."counter(css-demo-item)'、';
    display: inline;
}

.demo-box dt::before {
    content: counter(css-demo-title) '、';
    display: inline;
}

.demo-box dd {
    margin: 0;
}

.demo-box dd+dd {
    margin-top: 10px;
}